<template>
  <div class="tea-recommendation">
    <h3 class="title">{{ constitution }}推荐茶饮</h3>
    <div class="tea-cards">
      <div class="tea-card" v-for="(tea, index) in teaData[constitution]" :key="index">
        <div class="tea-icon">
          <i :class="tea.icon"></i>
        </div>
        <div class="tea-info">
          <h4 style="  background: linear-gradient(45deg, #f8e8ba, #d09d54);-webkit-background-clip: text;-webkit-text-fill-color: transparent;"
              >{{ tea.name }}</h4>
          <div class="tea-properties">
            <div class="property">
              <i class="fa fa-check-circle"></i>
              <span>功效：{{ tea.benefits }}</span>
            </div>
            <div class="property">
              <i class="fa fa-user-plus"></i>
              <span>适宜人群：{{ tea.suitableFor }}</span>
            </div>
            <div class="property warning">
              <i class="fa fa-exclamation-triangle"></i>
              <span>禁忌：{{ tea.contraindications }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  constitution: {
    type: String,
    required: true,
    validator: (value) => [
      '平和质',
      '气虚质',
      '阳虚质',
      '阴虚质',
      '痰湿质',
      '湿热质',
      '血瘀质',
      '气郁质',
      '特禀质'
    ].includes(value)
  }
});

const teaData = {
  '平和质': [
    {
      icon: 'fa fa-leaf',
      name: '绿茶',
      benefits: '清热提神、降火消暑',
      suitableFor: '体质平和、精力充沛者',
      contraindications: '空腹、失眠人群慎用'
    },
    {
      icon: 'fa fa-pagelines',
      name: '乌龙茶',
      benefits: '消脂解腻、提升代谢',
      suitableFor: '需要控制体重者',
      contraindications: '胃酸过多者慎用'
    }
  ],
  '气虚质': [
    {
      icon: 'fa fa-coffee',
      name: '红茶',
      benefits: '温补气血、提升活力',
      suitableFor: '气虚乏力、易疲劳者',
      contraindications: '胃部不适者慎用'
    },
    {
      icon: 'fa fa-tree',
      name: '人参茶',
      benefits: '补气养血、增强体力',
      suitableFor: '体虚无力者',
      contraindications: '高血压患者慎用'
    }
  ],
  '阳虚质': [
    {
      icon: 'fa fa-coffee',
      name: '红茶',
      benefits: '温阳补气、驱寒暖胃',
      suitableFor: '手脚冰凉、畏寒者',
      contraindications: '阴虚火旺者慎用'
    },
    {
      icon: 'fa fa-fire',
      name: '姜茶',
      benefits: '温阳散寒、促进循环',
      suitableFor: '畏寒怕冷者',
      contraindications: '胃火旺盛者慎用'
    }
  ],
  '阴虚质': [
    {
      icon: 'fa fa-snowflake-o',
      name: '白茶',
      benefits: '清热养阴、滋润降火',
      suitableFor: '口干咽燥、手足心热者',
      contraindications: '脾胃虚寒者慎用'
    },
    {
      icon: 'fa fa-leaf',
      name: '菊花茶',
      benefits: '清热明目、养阴生津',
      suitableFor: '易上火、口干者',
      contraindications: '胃寒者慎用'
    }
  ],
  '痰湿质': [
    {
      icon: 'fa fa-pagelines',
      name: '乌龙茶',
      benefits: '化痰利湿、消脂解腻',
      suitableFor: '体型肥胖、痰湿重者',
      contraindications: '胃酸过多者慎用'
    },
    {
      icon: 'fa fa-leaf',
      name: '普洱茶',
      benefits: '消脂去腻、化湿健脾',
      suitableFor: '痰湿体质者',
      contraindications: '胃寒者慎用'
    }
  ],
  '湿热质': [
    {
      icon: 'fa fa-leaf',
      name: '绿茶',
      benefits: '清热利湿、消暑解毒',
      suitableFor: '易上火、口干者',
      contraindications: '胃寒者慎用'
    },
    {
      icon: 'fa fa-pagelines',
      name: '荷叶茶',
      benefits: '清热利湿、助消化',
      suitableFor: '湿热体质者',
      contraindications: '脾胃虚寒者慎用'
    }
  ],
  '血瘀质': [
    {
      icon: 'fa fa-coffee',
      name: '红茶',
      benefits: '活血化瘀、温通经络',
      suitableFor: '血瘀体质者',
      contraindications: '出血性疾病者慎用'
    },
    {
      icon: 'fa fa-leaf',
      name: '玫瑰茶',
      benefits: '活血化瘀、理气解郁',
      suitableFor: '气血瘀滞者',
      contraindications: '月经量多者慎用'
    }
  ],
  '气郁质': [
    {
      icon: 'fa fa-pagelines',
      name: '花茶',
      benefits: '舒郁解压、安神助眠',
      suitableFor: '易焦虑、失眠者',
      contraindications: '过敏体质者慎用'
    },
    {
      icon: 'fa fa-leaf',
      name: '茉莉花茶',
      benefits: '理气解郁、提神醒脑',
      suitableFor: '情绪低落者',
      contraindications: '胃酸过多者慎用'
    }
  ],
  '特禀质': [
    {
      icon: 'fa fa-snowflake-o',
      name: '白茶',
      benefits: '温和滋润、增强免疫',
      suitableFor: '体质特异、免疫力低下者',
      contraindications: '寒性体质者慎用'
    },
    {
      icon: 'fa fa-leaf',
      name: '金银花茶',
      benefits: '清热解毒、增强抵抗力',
      suitableFor: '易过敏体质者',
      contraindications: '胃寒者慎用'
    }
  ]
};
</script>

<style scoped>
.tea-recommendation {
  height: 100%;
  overflow-y: auto;
  padding: 10px;
}

.title {
  background: linear-gradient(45deg, #f8e8ba, #d09d54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
  margin-bottom: 15px;
  text-align: center;
}

.tea-cards {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tea-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(50, 204, 238, 0.1);
  border-radius: 8px;
  padding: 5px;
  border: 1px solid rgba(50, 204, 238, 0.3);
}

.tea-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(50, 204, 238, 0.2);
  border-radius: 50%;
}

.tea-icon i {
  font-size: 20px;
  color: #32ccee;
}

.tea-info {
  flex: 1;
  min-width: 0;
}

.tea-info h4 {
  color: #32ccee;
  margin: 0 0 6px;
  font-size: 16px;
}

.tea-properties {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.property {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 14px;
}

.property i {
  color: #32ccee;
  font-size: 14px;
}

.property.warning i {
  color: #ff9800;
}

/* 自定义滚动条样式 */
.tea-recommendation::-webkit-scrollbar {
  width: 6px;
}

.tea-recommendation::-webkit-scrollbar-track {
  background: rgba(50, 204, 238, 0.1);
  border-radius: 3px;
}

.tea-recommendation::-webkit-scrollbar-thumb {
  background: rgba(50, 204, 238, 0.3);
  border-radius: 3px;
}

.tea-recommendation::-webkit-scrollbar-thumb:hover {
  background: rgba(50, 204, 238, 0.5);
}
</style>